<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; background: #CDE; }


</style>
</head>
<body>

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix.js"></script>


</body>
<script>

const vs = `
attribute vec4 position;
uniform mat4 u_worldViewProjection;
void main() {
  gl_Position = u_worldViewProjection * position;
}
`;

const fs = `
precision mediump float;
void main() {
  gl_FragColor = vec4(vec3(0), 1);
}
`

const gl = document.querySelector("canvas").getContext("webgl");
const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

const bufferInfo = twgl.createBufferInfoFromArrays(gl, {
  position: [
    -1, -1, -1,
     1, -1, -1,
     1,  1, -1,
    -1,  1, -1,
    -1, -1,  1,
     1, -1,  1,
     1,  1,  1,
    -1,  1,  1,
  ],
  indices: {
    numComponents: 2,
    data: [
      0, 1,
      1, 2,
      2, 3,
      3, 0,
      4, 5,
      5, 6,
      6, 7,
      7, 4,
      0, 4,
      1, 5,
      2, 6,
      3, 7,
    ],
  },
});

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  const fov = 90 * Math.PI / 180;
  const zNear = 0.5;
  const zFar = 100;
  const projection = mat4.perspective(mat4.create(),
      fov, gl.canvas.clientWidth / gl.canvas.clientHeight, zNear, zFar);
  const eye = [0, 0, 10];
  const target = [0, 0, 0];
  const up = [0, 1, 0];
  const view = mat4.lookAt(mat4.create(), eye, target, up);

  drawCube([-8, 0, 0], projection, view);
  drawCube([-4, 0, 0], projection, view);
  drawCube([ 0, 0, 0], projection, view);
  drawCube([ 4, 0, 0], projection, view);
  drawCube([ 8, 0, 0], projection, view);

  const iconAreaWidth  = 100;
  const iconAreaHeight = 75;
  gl.viewport(
      gl.canvas.width - iconAreaWidth, 0, 
      iconAreaWidth, iconAreaHeight);     
  const iconProjection = mat4.perspective(mat4.create(),
      fov, iconAreaWidth / iconAreaHeight, zNear, zFar);
  // compute the zoom size need to make things the sngs
  const scale = gl.canvas.clientHeight / iconAreaHeight;
  mat4.scale(iconProjection, iconProjection, [scale, scale, 1]);
  drawCube([ 0, 0, 0], iconProjection, view);

  function drawCube(translation, projection, view) {
    const viewProjection = mat4.multiply(mat4.create(), projection, view);
    const world = mat4.multiply(
       mat4.create(),
       mat4.fromTranslation(mat4.create(), translation),
       mat4.fromRotation(mat4.create(), time, [0.42, 0.56, 0.70]));
    const worldViewProjection = mat4.multiply(mat4.create(), viewProjection, world);

    gl.useProgram(programInfo.program);
    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
    twgl.setUniforms(programInfo, {
      u_worldViewProjection: worldViewProjection,
    });
    twgl.drawBufferInfo(gl, bufferInfo, gl.LINES);
  }
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);


</script>
